<template>
  <div class="enterprise-certification">
    <div class="page-header">
      <h3>企业认证</h3>
    </div>

    <div class="certification-content">
      <!-- 步骤条 -->
      <a-steps :current="currentStep" class="certification-steps">
        <a-step title="选择企业类型" />
        <a-step title="填交证件信息" />
        <a-step title="提交成功" />
      </a-steps>

      <!-- 第一步：选择企业类型 -->
      <div v-if="currentStep === 0" class="step-content">
        <div class="selection-section">
          <h4>请选择企业类型</h4>
          <a-radio-group v-model:value="formState.companyType">
            <a-radio :value="0">企业</a-radio>
            <!--            <a-radio value="1">其他</a-radio>-->
          </a-radio-group>
        </div>

        <div class="selection-section">
          <h4>请选择证件类型</h4>
          <a-radio-group v-model:value="formState.companyCertType">
            <a-radio :value="0">营业执照</a-radio>
          </a-radio-group>

          <!-- 证件示例图 -->
          <div class="certificate-example">
            <img :src="licenseImg" alt="营业执照示例" class="example-image" />
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="step-footer">
          <a-button type="primary" @click="nextStep">下一步</a-button>
        </div>
      </div>

      <!-- 第二步：填写证件信息 -->
      <div v-if="currentStep === 1" class="step-content">
        <h4>营业执照信息</h4>

        <!-- 图片上传说明 -->
        <div class="upload-tips">
          <p>1. 请上传最新证件原件的彩色扫描件或数码照片，如使用复印件请加盖公章上传(勿遮盖统一社会信用代码)，推荐使用原件电子版。</p>
          <p>2. 图片格式支持: jpg/jpeg/png/bmp格式。</p>
          <p>3. 请使用像素大于600万像素的相机或手机拍摄，图片大小不超过2M。</p>
          <p>4. 经微信传输过的图片会导致图片失真，请避免使用经微信传输过的图片。</p>
        </div>

        <!-- 证件上传区域 -->
        <div class="license-upload">
          <div class="upload-preview">
            <div class="preview-item">
              <!--              <img v-if="licenseFile" :src="licensePreview" class="preview-image" />
              <div v-else class="upload-placeholder" @click="triggerUpload">
                <plus-outlined />
                <p>点击上传</p>
              </div>
              <input type="file" ref="fileInput" style="display: none" accept=".jpg,.jpeg,.png,.bmp" @change="handleFileChange" />-->
              <img v-if="licenseFile" :src="licensePreview" class="preview-image" />
              <a-upload
                v-else
                v-model:file-list="formState.licenses"
                :max-count="1"
                name="licenses"
                :custom-request="(file) => uploadFunc(file, 'licenses', 1)"
                :accept="limitUpload['licenses'].fileType.toString()"
                :before-upload="(file, fileList) => beforeUpload(file, fileList, 'licenses')"
                :headers="{
                  authorization: 'authorization-text',
                }"
              >
                <a-button>
                  <upload-outlined />
                  点击上传
                </a-button>
              </a-upload>
            </div>
            <div class="example-wrapper">
              <div class="example-item">
                <img :src="licenseImg" alt="正确示例" class="example-image" />
                <div class="example-text">
                  <check-circle-outlined style="color: #52c41a" />
                  <span>正确示例（点击放大）</span>
                </div>
              </div>
              <div class="example-item">
                <img :src="licenseImg" alt="错误示例" class="example-image" />
                <div class="example-text">
                  <close-circle-outlined style="color: #ff4d4f" />
                  <span>错误示例（点击放大）</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 表单信息 -->
          <a-form :model="formState" :rules="rules" layout="vertical">
            <a-form-item label="统一社会信用代码" required>
              <a-input v-model:value="formState.companyLicenseInfo.creditCode">
                <template #suffix>
                  <a-button type="link" size="small" @click="handleVerify">查询</a-button>
                </template>
              </a-input>
            </a-form-item>

            <a-form-item label="公司名称" required>
              <a-input v-model:value="formState.companyLicenseInfo.companyName" />
            </a-form-item>

            <a-form-item label="企业注册地址" required>
              <a-space direction="vertical" style="width: 100%">
                <div class="address-select">
                  <CustomSelect
                    ref="provinceSelect"
                    style="width: 200px"
                    v-model:value="formState.companyLicenseInfo.regProvincial"
                    :placeholder="'请选择省份'"
                    :api="areaApi.page"
                    queryParamKey="nameLeftLike"
                    :queryParams="provincalParam"
                  />
                  <CustomSelect
                    ref="citySelect"
                    style="width: 200px"
                    v-model:value="formState.companyLicenseInfo.regCity"
                    :placeholder="'请选择城市'"
                    :api="areaApi.page"
                    queryParamKey="nameLeftLike"
                    :queryParams="cityParam"
                  />
                </div>
                <a-input v-model:value="formState.companyLicenseInfo.regAddress" placeholder="详细地址" />
              </a-space>
            </a-form-item>

            <a-form-item label="经营范围" required>
              <a-textarea v-model:value="formState.companyLicenseInfo.businessScope" :rows="4" />
            </a-form-item>

            <a-form-item label="营业期限" required>
              <a-radio-group v-model:value="formState.businessTerm">
                <a-radio :value="true">长期</a-radio>
                <a-radio :value="false">固定日期</a-radio>
              </a-radio-group>
              <a-range-picker
                v-if="formState.businessTerm === false"
                v-model:value="formState.businessValidityRange"
                style="width: 100%; margin-top: 8px"
              />
            </a-form-item>

            <a-form-item label="单位联系电话" required>
              <a-input v-model:value="formState.companyLicenseInfo.phone" />
            </a-form-item>

            <!-- 对公账户信息 暂未接入银行，先写死-->
            <div class="section-title">对公账户信息</div>
            <a-form-item label="开户银行" required>
              <a-select v-model:value="formState.bankCode" style="width: 100%">
                <a-select-option value="ABC123">中国光大银行</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="选择开户支行" required>
              <a-select v-model:value="formState.bankBranchCode" style="width: 100%">
                <a-select-option value="B123456"> 中国光大银行股份有限公司福州通湾支行 </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="银行账号" required>
              <a-input v-model:value="formState.cardNo" />
            </a-form-item>

            <!-- 法定代表人（负责人）证件 -->
            <div class="section-title">法定代表人（负责人）证件</div>
            <div class="id-card-upload">
              <div class="upload-section">
                <div class="upload-title">上传正面</div>
                <div class="upload-area">
                  <!--                  <img v-if="idCardFront" :src="idCardFrontPreview" class="preview-image" />
                  <div v-else class="upload-placeholder" @click="triggerIdCardFrontUpload">
                    <plus-outlined />
                    <p>点击上传</p>
                  </div>
                  <input type="file" ref="idCardFrontInput" style="display: none" accept=".jpg,.jpeg,.png,.bmp" @change="handleIdCardFrontChange" />-->
                  <img v-if="idCardFront" :src="idCardFrontPreview" class="preview-image" />
                  <a-upload
                    v-else
                    v-model:file-list="formState.idCardFronts"
                    :max-count="1"
                    name="idCardFronts"
                    :custom-request="(file) => uploadFunc(file, 'idCardFronts', 2)"
                    :accept="limitUpload['idCardFronts'].fileType.toString()"
                    :before-upload="(file, fileList) => beforeUpload(file, fileList, 'idCardFronts')"
                    :headers="{
                      authorization: 'authorization-text',
                    }"
                  >
                    <a-button>
                      <upload-outlined />
                      点击上传
                    </a-button>
                  </a-upload>
                </div>
                <div class="upload-tip">查看示例(点击)</div>
              </div>

              <div class="upload-section">
                <div class="upload-title">上传反面</div>
                <div class="upload-area">
                  <!--                  <img v-if="idCardBack" :src="idCardBackPreview" class="preview-image" />
                  <div v-else class="upload-placeholder" @click="triggerIdCardBackUpload">
                    <plus-outlined />
                    <p>点击上传</p>
                  </div>
                  <input type="file" ref="idCardBackInput" style="display: none" accept=".jpg,.jpeg,.png,.bmp" @change="handleIdCardBackChange" />-->
                  <img v-if="idCardBack" :src="idCardBackPreview" class="preview-image" />
                  <a-upload
                    v-else
                    v-model:file-list="formState.idCardBacks"
                    :max-count="1"
                    name="idCardBacks"
                    :custom-request="(file) => uploadFunc(file, 'idCardBacks', 3)"
                    :accept="limitUpload['idCardBacks'].fileType.toString()"
                    :before-upload="(file, fileList) => beforeUpload(file, fileList, 'idCardBacks')"
                    :headers="{
                      authorization: 'authorization-text',
                    }"
                  >
                    <a-button>
                      <upload-outlined />
                      点击上传
                    </a-button>
                  </a-upload>
                </div>
                <div class="upload-tip">查看示例(点击)</div>
              </div>
            </div>

            <a-form-item label="选择证件类型" required>
              <a-select v-model:value="formState.legalPersonCertType" style="width: 100%">
                <a-select-option :value="1">身份证</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="姓名" required>
              <a-input v-model:value="formState.legalPersonIdentityCardInfo.name" />
            </a-form-item>

            <a-form-item label="证件号码" required>
              <a-input v-model:value="formState.legalPersonIdentityCardInfo.idCard" />
            </a-form-item>

            <a-form-item label="有效期限" required>
              <a-radio-group v-model:value="formState.idCardValidity">
                <a-radio :value="true">长期</a-radio>
                <a-radio :value="false">固定日期</a-radio>
              </a-radio-group>
              <a-range-picker
                v-if="formState.idCardValidity === false"
                v-model:value="formState.idCardValidityRange"
                style="width: 100%; margin-top: 8px"
              />
            </a-form-item>

            <!-- 被授权人身份信息 -->
            <div class="section-title">被授权人身份信息</div>
            <a-checkbox v-model:checked="formState.authEqLegalPersonFlag"> 被授权人同法定代表人（负责人） </a-checkbox>

            <!-- 企业联系人信息 -->
            <div class="section-title">企业联系人信息</div>
            <a-form-item label="联系人手机号码" required>
              <a-input v-model:value="formState.companyPhone" />
              <div class="form-tip">请输入企业紧急联系人，以便相关资质通过后联系您提醒</div>
            </a-form-item>
          </a-form>
        </div>

        <!-- 底部按钮 -->
        <div class="step-footer">
          <a-space>
            <a-button @click="prevStep">上一步</a-button>
            <a-button type="primary" @click="handleSave">保存</a-button>
            <a-button type="primary" @click="onsubmit">提交认证</a-button>
          </a-space>
        </div>
      </div>

      <!-- 第三步：提交成功 -->
      <div v-if="currentStep === 2" class="step-content success-content">
        <div class="success-icon">
          <check-circle-filled class="icon" />
        </div>
        <h3 class="success-title">资料提交成功</h3>
        <p class="success-desc">等待审核</p>
        <div class="step-footer">
          <a-button type="primary" @click="handleReturn">返回</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue'
  import { PlusOutlined, CheckCircleOutlined, CloseCircleOutlined, CheckCircleFilled } from '@ant-design/icons-vue'
  import { useRouter } from 'vue-router'
  import CustomSelect from '/@/components/business/comment/CustomSelect.vue'
  import { areaApi } from '/@/api/business/b-operation/area/area-api.js'
  import { message } from 'ant-design-vue'
  import { certRecordApi } from '/@/api/business/b-agent/enterprise/cert-record-api.js'
  import { uploadFileOther } from '/@/api/support/file-api.js'

  // 使用 new URL 导入图片
  const licenseImg = new URL('../../../../../assets/images/enterprise/license.png', import.meta.url).href

  const currentStep = ref(0)
  const enterpriseType = ref('enterprise')
  const certificateType = ref('business')

  // 文件上传相关
  const fileInput = ref(null)
  const licenseFile = ref(null)
  const licensePreview = ref('')

  // 身份证上传相关
  const idCardFrontInput = ref(null)
  const idCardBackInput = ref(null)
  const idCardFront = ref(null)
  const idCardBack = ref(null)
  const idCardFrontPreview = ref('')
  const idCardBackPreview = ref('')

  // 表单数据
  const formState = reactive({
    companyType: 0,
    companyCertType: 0,
    companyLicenseInfo: {
      creditCode: undefined,
      companyName: undefined,
      regProvincial: undefined,
      regCity: undefined,
      regAddress: undefined,
      businessScope: undefined,
      phone: undefined,
    },
    businessTerm: true,
    businessValidityRange: undefined,
    bankCode: undefined, //todo 需要后续接入银行
    bankBranchCode: undefined, //todo 需要后续接入银行
    cardNo: undefined,
    legalPersonCertType: 1,
    legalPersonIdentityCardInfo: {
      name: undefined,
      idCard: undefined,
    },
    idCardValidity: true,
    idCardValidityRange: undefined,
    authEqLegalPersonFlag: false,
    companyPhone: undefined,
    licenses: [],
    idCardFronts: [],
    idCardBacks: [],
  })

  // 表单验证规则
  const rules = {
    creditCode: [{ required: true, message: '请输入统一社会信用代码' }],
    companyName: [{ required: true, message: '请输入公司名称' }],
    regAddress: [{ required: true, message: '请输入详细地址' }],
    businessScope: [{ required: true, message: '请输入经营范围' }],
    phone: [{ required: true, message: '请输入联系电话' }],
  }
  const limitUpload = {
    licenses: {
      fileType: ['.jpg', '.jpeg', '.png', '.bmp', '.gif'],
      fileSize: 5,
    },
    idCardFronts: {
      fileType: ['.jpg', '.jpeg', '.png', '.bmp', '.gif'],
      fileSize: 5,
    },
    idCardBacks: {
      fileType: ['.jpg', '.jpeg', '.png', '.bmp', '.gif'],
      fileSize: 5,
    },
  }

  const beforeUpload = (file, fileList, type) => {
    // 校检文件类型
    if (limitUpload[type].fileType.length) {
      const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
      const isTypeOk = limitUpload[type].fileType.includes(fileExt)
      if (!isTypeOk) {
        message.warning(`文件格式不正确, 请上传${limitUpload[type].fileType.toString().replace(/\./g, '').replace(/,/g, '、')}格式文件!`)
        return false
      }
    }

    // 校检文件大小
    if (limitUpload[type].fileSize) {
      const isLt = file.size / 1024 / 1024 < limitUpload[type].fileSize
      if (!isLt) {
        message.warning(`上传文件大小不能超过 ${limitUpload[type].fileSize} MB!`)
        return false
      }
    }

    return true
  }

  // 上传文件自定义的方法
  const uploadFunc = (file, fieldName, number) => {
    // 确保获取到文件对象
    const fileObj = file.file
    if (!fileObj) {
      return
    }

    // 使用 FileReader 将文件转换为 Base64
    const reader = new FileReader()
    reader.onload = async (e) => {
      const base64Data = e.target.result.split(',')[1]

      // 构建请求数据
      const uploadData = {
        fileName: fileObj.name, // 文件名
        file: base64Data, // 去掉前缀的 Base64 数据
      }
      // 调用上传函数
      const response = await uploadFileOther(uploadData)
      // 检查上传是否成功
      if (response.data.code === 200) {
        // 更新文件对象
        handleUploadSuccess(response.data, fileObj, fieldName, number)
      } else {
        message.error('上传失败')
      }
    }

    reader.onerror = () => {
      message.error('文件读取失败')
    }

    // 读取文件为 Data URL
    reader.readAsDataURL(fileObj)
  }
  const handleUploadSuccess = (response, fileObj, fieldName, number) => {
    if (response.code === 200 && response.data) {
      const formattedFile = {
        uid: fileObj.uid,
        name: fileObj.name,
        status: 'done',
        url: response.data.url,
      }
      formState[fieldName] = formState[fieldName].map((item) => {
        if (item.uid === fileObj.uid) {
          if (number === 1) {
            licenseFile.value = fileObj
            licensePreview.value = URL.createObjectURL(fileObj)
          } else if (number === 2) {
            idCardFront.value = fileObj
            idCardFrontPreview.value = URL.createObjectURL(fileObj)
          } else {
            idCardBack.value = fileObj
            idCardBackPreview.value = URL.createObjectURL(fileObj)
          }
          message.success(`${fileObj.name} 上传成功`)
          return formattedFile
        }
        return item
      })
    }
  }

  const getUrlString = (fileList) => {
    //判断数组长度，如果为1则返回第一个元素的url，如果为空则返回空字符串，如果大于1则返回所有元素的url的数组
    if (fileList && fileList.length === 1) {
      return fileList[0].url
    } else {
      return undefined
    }
  }

  function formatBusinessValidity(range) {
    if (!range || range.length < 2) return ''

    const [start, end] = range
    const startDate = extractDate(start)
    const endDate = extractDate(end)

    // 确保两者都是有效的 Date 对象
    if (!(startDate instanceof Date) || !(endDate instanceof Date)) {
      return ''
    }

    return `${formatDate(startDate)}-${formatDate(endDate)}`
  }

  // 提取 Date 对象
  function extractDate(proxyObject) {
    // 直接尝试获取 $d 属性
    if (proxyObject && typeof proxyObject === 'object' && proxyObject.hasOwnProperty('$d')) {
      return proxyObject.$d
    }
    return null
  }

  // 格式化 Date 对象为 YYYY/MM/DD
  function formatDate(date) {
    if (!(date instanceof Date) || isNaN(date.getTime())) {
      return '未知日期'
    }

    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}/${month}/${day}`
  }

  const onsubmit = async () => {
    try {
      // 构造提交数据
      const formData = {
        companyType: formState.companyType,
        companyCertType: formState.companyCertType,
        companyLicenseInfo: {
          longTermFlag: formState.businessTerm,
          creditCode: formState.companyLicenseInfo.creditCode,
          companyName: formState.companyLicenseInfo.companyName,
          regProvincial: getSelectedLabels(formState.companyLicenseInfo.regProvincial, provinceSelect),
          regCity: getSelectedLabels(formState.companyLicenseInfo.regCity, citySelect),
          regAddress: formState.companyLicenseInfo.regAddress,
          businessScope: formState.companyLicenseInfo.businessScope,
          phone: formState.companyLicenseInfo.phone,
          businessTerm: formState.businessTerm === false ? formatBusinessValidity(formState.businessValidityRange) : undefined,
        },
        bankCode: formState.bankCode,
        bankBranchCode: formState.bankBranchCode,
        cardNo: formState.cardNo,
        legalPersonCertType: formState.legalPersonCertType,
        legalPersonIdentityCardInfo: {
          longTermFlag: formState.idCardValidity,
          name: formState.legalPersonIdentityCardInfo.name,
          idCard: formState.legalPersonIdentityCardInfo.idCard,
          businessTerm: formState.idCardValidity === false ? formatBusinessValidity(formState.idCardValidityRange) : undefined,
        },
        authEqLegalPersonFlag: formState.authEqLegalPersonFlag ? 1 : 0,
        companyPhone: formState.companyPhone,
        licenseUrl: getUrlString(formState.licenses),
        idCardFrontUrl: getUrlString(formState.idCardFronts),
        idCardBackUrl: getUrlString(formState.idCardBacks),
      }
      // 调用后端接口
      await certRecordApi.insert(formData)

      // 提交成功后跳转到下一步
      currentStep.value = 2
      message.success('认证资料已提交')
    } catch (error) {
      message.error('提交失败，请检查输入')
    }
  }

  const router = useRouter()
  const areaDefault = reactive({
    fAreaId: '000000000000',
    pageSize: 100,
    type: 1,
  })
  const provincalParam = reactive({ ...areaDefault })
  const cityParam = reactive({
    fAreaId: formState.companyLicenseInfo.regProvincial === undefined ? 'unknown' : formState.companyLicenseInfo.regProvincial,
    pageSize: 100,
    type: 2,
  })
  const provinceSelect = ref()
  const citySelect = ref()

  // 方法：根据 selectedValue 和 options 获取标签
  const getValueLabel = (selectedValue, options) => {
    if (!selectedValue) return null // 如果没有选中值，返回 null 或其他默认值

    if (Array.isArray(selectedValue)) {
      // 多选模式：返回标签数组
      return selectedValue
        .map((value) => {
          const option = options.find((opt) => opt.value === value)
          return option ? option.label : '未匹配'
        })
        .filter((label) => label !== '未匹配') // 过滤掉未匹配的项
    } else {
      // 单选模式：返回单一标签值
      const option = options.find((opt) => opt.value === selectedValue)
      return option ? option.label : '未匹配'
    }
  }

  // 方法：获取并更新选中的标签
  const getSelectedLabels = (innerValue, childComponent) => {
    const options = childComponent.value?.options || []
    return getValueLabel(innerValue, options)
  }

  // 监听 formState.companyLicenseInfo.regProvincial 的变化
  watch(
    () => formState.companyLicenseInfo.regProvincial, // 只监听 regProvincial 的变化
    (newVal, oldVal) => {
      formState.companyLicenseInfo.regCity = undefined
      cityParam.fAreaId = newVal === undefined ? 'unknown' : newVal
    },
  )

  // 触发文件上传
  const triggerUpload = () => {
    fileInput.value.click()
  }

  // 处理文件变化
  const handleFileChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      if (file.size > 2 * 1024 * 1024) {
        // 显示错误提示：文件大小超过2M
        return
      }
      licenseFile.value = file
      licensePreview.value = URL.createObjectURL(file)
    }
  }

  // 查询按钮处理
  const handleVerify = () => {
    // 实现查询逻辑
  }

  // 身份证上传处理函数
  const triggerIdCardFrontUpload = () => {
    idCardFrontInput.value.click()
  }

  const triggerIdCardBackUpload = () => {
    idCardBackInput.value.click()
  }

  const handleIdCardFrontChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      if (file.size > 2 * 1024 * 1024) {
        // 显示错误提示：文件大小超过2M
        return
      }
      idCardFront.value = file
      idCardFrontPreview.value = URL.createObjectURL(file)
    }
  }

  const handleIdCardBackChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      if (file.size > 2 * 1024 * 1024) {
        // 显示错误提示：文件大小超过2M
        return
      }
      idCardBack.value = file
      idCardBackPreview.value = URL.createObjectURL(file)
    }
  }

  // 保存按钮处理函数
  const handleSave = () => {
    // 实现保存逻辑
  }

  // 返回按钮处理函数
  const handleReturn = () => {
    // 返回列表页面
    router.back()
  }

  // 步骤控制
  const prevStep = () => {
    currentStep.value--
  }

  const nextStep = () => {
    currentStep.value++
  }
</script>

<style lang="less" scoped>
  .enterprise-certification {
    background: #fff;
    min-height: 100vh;

    .page-header {
      padding: 16px 24px;
      border-bottom: 1px solid #f0f0f0;

      h3 {
        font-size: 16px;
        color: #333;
        margin: 0;
        font-weight: 500;
      }
    }

    .certification-content {
      padding: 24px;

      .certification-steps {
        max-width: 800px;
        margin: 0 auto 48px;
      }

      .step-content {
        max-width: 800px;
        margin: 0 auto;

        .selection-section {
          margin-bottom: 40px;

          h4 {
            font-size: 14px;
            color: #333;
            margin: 0 0 16px;
          }

          .ant-radio-group {
            display: block;
            margin-bottom: 24px;
          }

          .certificate-example {
            margin-top: 24px;
            text-align: center;

            .example-image {
              max-width: 300px;
              border: 1px solid #f0f0f0;
              border-radius: 4px;
            }

            .example-text {
              margin: 8px 0 0;
              font-size: 12px;
              color: #666;
            }
          }
        }

        .step-footer {
          text-align: center;
          margin-top: 48px;

          .ant-btn {
            min-width: 120px;
          }
        }

        .upload-tips {
          margin-bottom: 24px;
          padding: 16px;
          background: #fafafa;
          border-radius: 4px;

          p {
            margin: 0;
            line-height: 1.8;
            color: #666;
            font-size: 12px;
          }
        }

        .license-upload {
          .upload-preview {
            display: flex;
            margin-bottom: 24px;

            .preview-item {
              width: 240px;
              height: 320px;
              border: 1px dashed #d9d9d9;
              border-radius: 4px;
              overflow: hidden;
              margin-right: 24px;

              .preview-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .upload-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background: #fafafa;

                &:hover {
                  border-color: #1890ff;
                }

                .anticon {
                  font-size: 24px;
                  color: #999;
                  margin-bottom: 8px;
                }

                p {
                  margin: 0;
                  color: #666;
                }
              }
            }

            .example-wrapper {
              flex: 1;

              .example-item {
                margin-bottom: 16px;

                .example-image {
                  width: 120px;
                  height: 160px;
                  object-fit: cover;
                  border: 1px solid #f0f0f0;
                  border-radius: 4px;
                  margin-bottom: 8px;
                }

                .example-text {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  color: #666;
                  font-size: 12px;
                }
              }
            }
          }
        }

        .address-select {
          display: flex;
          gap: 16px;
          margin-bottom: 16px;
        }

        .section-title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin: 24px 0 16px;
          padding-left: 12px;
          border-left: 4px solid #1890ff;
        }

        .id-card-upload {
          display: flex;
          gap: 24px;
          margin-bottom: 24px;

          .upload-section {
            flex: 1;

            .upload-title {
              margin-bottom: 8px;
              font-size: 14px;
              color: #333;
            }

            .upload-area {
              width: 240px;
              height: 150px;
              border: 1px dashed #d9d9d9;
              border-radius: 4px;
              overflow: hidden;

              .preview-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }

              .upload-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background: #fafafa;

                &:hover {
                  border-color: #1890ff;
                }

                .anticon {
                  font-size: 24px;
                  color: #999;
                  margin-bottom: 8px;
                }

                p {
                  margin: 0;
                  color: #666;
                }
              }
            }

            .upload-tip {
              margin-top: 8px;
              font-size: 12px;
              color: #1890ff;
              cursor: pointer;
              text-align: center;
            }
          }
        }

        .form-tip {
          font-size: 12px;
          color: #666;
          margin-top: 4px;
        }

        .form-footer {
          margin-top: 48px;
          text-align: center;

          .ant-btn {
            min-width: 120px;
          }
        }
      }

      .success-content {
        padding: 48px 0;
        text-align: center;

        .success-icon {
          margin-bottom: 24px;

          .icon {
            font-size: 72px;
            color: #52c41a;
          }
        }

        .success-title {
          margin: 0 0 16px;
          font-size: 24px;
          font-weight: 500;
          color: #333;
        }

        .success-desc {
          margin: 0 0 32px;
          font-size: 14px;
          color: #666;
        }

        .step-footer {
          .ant-btn {
            min-width: 120px;
          }
        }
      }
    }
  }
</style>
